<template>
    <!-- 首页正文 start -->
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="t in 3" :key="t">
            <div class="list-name">
                <span>热门电影{{ t }}</span>
                <span class="list-more">更多 > </span>
            </div>
            <FilmList class="list-content"></FilmList>
        </div>
        <!-- 首页分类列表 end -->
    </div>
    <!-- 首页正文 end -->
</template>

<script>

import FilmList from "../components/FilmList.vue"
export default {
    components: {
        FilmList
    }
}
</script>

<style>
.list-name>span {
    display: inline-block;
    margin: 0.24rem 0rem 0.24rem 0.1rem;
    padding: 0rem 0.2rem 0rem 0.1rem;
    font-size: 0.32rem;
}

.list-name>span:first-child {
    border-left: 4px solid #007bff;
}

.list-name>span.list-more {
    float: right;
    font-size: 0.28rem;
    color: #007bff;
}

.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}

.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
}

.list-content::after {
    content: "";
    width: 0.1rem;
    display: inline-block;
}
</style>